<template>
  <div class="home">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="publishTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot='scope'>
          <span @click='toDetail(scope.row)'>详情</span>
          <span>删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 导入axios
import axios from '@/http/axios'
export default {
    data(){
      return {
        tableData:[]
      }
    },
    created(){
      this.login()
      this.findAllNews()
    },
    methods:{
      // 查看详情
      toDetail(item){
        // 跳转到详情页面
        this.$router.push({
          path:'/about',
          query:{id:item.id}
        })
      },
      // 登录
      login(){
        axios.post('http://121.199.29.84:8001/user/login',{
          username:'admin',
          password:'123321'
        }).then((res)=>{
          // 将token储存到浏览器
          localStorage.setItem('token',res.data.data.token)
        })
      },
      // 查询所有的新闻
      findAllNews(){
        axios.get('http://121.199.29.84:8001/article/findAll').then((res)=>{
          this.tableData = res.data.data
        })
      }
    }
  }
</script>
